<template>
  <div>
    <el-form ref="form" :model="Form" label-width="80px">
      <el-form-item label="选择时间" prop="startTime">
        <el-date-picker
          v-model="Form.startTime"
          type="daterange"
          format="yyyy-MM-dd "
          value-format="yyyy-MM-dd"
          clearable
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <span>供应商:</span>
        <el-input v-model="supplierName" style="width: 110px;" clearable placol请der="输入内容"></el-input>
        <el-button style="margin-left: 7%" type="primary" @click="select">查询</el-button>
        <el-button style="margin-left: 7%" type="primary" @click="dialogFormVisible=true">添加退货</el-button>
        <!--弹窗框-->
        <el-dialog  style="margin-left: 20px" title="添加退货" :visible.sync="dialogFormVisible" width="34%"
                   center>
          <el-form ref="form" :rules='rules' :model="subForm" label-width="80px">
            <el-form-item label="申请时间" prop="outTime">
              <el-date-picker
                v-model="subForm.outTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                clearable
                @blur="getWarehouse">
              </el-date-picker>
            </el-form-item>
            <br>
            <el-form-item label="仓库" prop="warehouseName">
              <el-select v-model="subForm.warehouseName" clearable placeholder="请选择"
                         @change="getSupplier(subForm.warehouseName)">
                <el-option
                  v-for="item in subForm.select5"
                  :key="item.warehouseId"
                  :label="item.warehouseName"
                  :value="item.warehouseId">
                </el-option>
              </el-select>
            </el-form-item>
            <br>
            <el-form-item label="供应商" prop="supplierName">
              <el-select v-model="subForm.supplierName" @blur.native.capture="getGoodsType" clearable
                         placeholder="请选择">
                <el-option
                  v-for="item in subForm.select1"
                  :key="item.supplierId"
                  :label="item.supplierName"
                  :value="item.supplierId">
                </el-option>
              </el-select>
            </el-form-item>
            <br>
            <el-form-item label="商品分类" prop="goodsName">
              <el-select v-model="subForm.goodsName" @blur.native.capture="getGoodsName" clearable placeholder="请选择">
                <el-option
                  v-for="item in subForm.select2"
                  :key="item.goodsType"
                  :label="item.goodsType"
                  :value="item.goodsType">
                </el-option>
              </el-select>
            </el-form-item>
            <br>
            <el-form-item label="商品名称" prop="goodsType">
              <el-select v-model="subForm.goodsType" clearable @blur.native.capture="getGoodsNum" placeholder="请选择">
                <el-option
                  v-for="item in subForm.select3"
                  :key="item.goodsName"
                  :label="item.goodsName"
                  :value="item.goodsName">
                </el-option>
              </el-select>
            </el-form-item>
            <br>
            <el-form-item label="商品数量" prop="goodsNum">
              <el-input style="width: 225px" v-model="subForm.goodsNum" :disabled="true" placeholder="请输入内容"
                        maxLength='9'></el-input>
              <span>件</span>
            </el-form-item>
            <br>
            <el-form-item label="退货数量" prop="outNum">
              <el-input style="width: 225px" v-model="subForm.outNum"  placeholder="请输入内容"
                        maxLength='9'></el-input>
              <span>件</span>
            </el-form-item>
            <br>
            <el-form-item label="退货原因" prop="desc">
              <el-input style="width: 225px" type="textarea" v-model="subForm.desc" :rows="2"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="verification">确 定</el-button>
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>
    <div>
      <!--表格-->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
          :index="indexMethod"
          width="50">
        </el-table-column>
        <el-table-column
          prop="modifyTime"
          label="申请时间"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="supplierName"
          label="供应商"
        >
        </el-table-column>
        <el-table-column
          prop="goodsType"
          label="商品分类"
        >
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="商品名称"
        >
        </el-table-column>
        <el-table-column
          prop="returnNum"
          label="退货数量"
        >
        </el-table-column>
        <el-table-column
          prop="goodsUnit"
          label="商品单位"
        >
        </el-table-column>
        <el-table-column
          prop="stateType"
          label="退货状态"
        >
        </el-table-column>
          <el-table-column
            prop="returnPolicy"
            label="退货原因"
          >
          </el-table-column>
          <el-table-column
            prop="warehouseName"
            label="仓库名"
          >
          </el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                :disabled="scope.row.stateType !='审核通过'"
                type="success"
                @click="returnGoods(scope.$index, scope.row)">确认退货
              </el-button>
            </template>
          </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <!--
      size-change：选择每页显示几行
      current-change：上一页 下一页
      current-page：当前页
      page-sizes：一页显示多少行的集合
      page-size：一页显示多少行
      total：总条数
           -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[5, 10, 15, 20]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ReturnList',
    mounted () {//默认第一次加载
      initTable(this)
    },
    data () {
      return {
        supplierName: '',
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          }
        },
        tableData: [],
        total: 0,
        page: 1,
        size: 5,
        dialogFormVisible: false,

        Form: {
          startTime: '',
          overTime: ''
        },
        subForm: {
          outTime: '',
          supplierName: '',
          goodsName: '',
          goodsType: '',
          goodsNum: '',
          outNum:'',
          warehouseName: '',
          select1: [],
          select2: [],
          select3: [],
          select5: [],
          desc: ''

        },
        rules: {
          outTime: [
            {
              required: true,
              message: '时间不能不选择',
              trigger: 'blur'
            }
          ],
          supplierName: [
            {
              required: true,
              message: '供应商必须选',
              trigger: ['blur', 'change']
            }
          ],
          goodsName: [
            {
              required: true,
              message: '商品的种类必须选',
              trigger: ['blur', 'change']
            }
          ],
          goodsType: [
            {
              required: true,
              message: '商品的类型必须选',
              trigger: ['blur', 'change']
            }
          ],
          outNum:[
            {
              required: true,
              message: '商品的类型必须选',
              trigger: 'blur'
            }
          ],

          desc: [
            {
              required: true,
              message: '退货原因必须填写',
              trigger: 'blur',
            }
          ],
          warehouseName: [
            {
              required: true,
              message: '仓库名必须选',
              trigger: ['blur', 'change']
            }
          ]
        }
      }
    },
    methods: {
      select () {
        initTable(this)
      },
      //以下是表格部分的方法
      indexMethod (index) {
        return index + 1
      },
      handleSizeChange (val) {
        this.size = val
        initTable(this)
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange (val) {
        this.page = val
        initTable(this)
        console.log(`当前页: ${val}`)
      },
      //数据表格移除的方法
      handleDelete (index, row) {
        this.$confirm('是否执行此操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('delReturnList', {
            returnId: row.returnId,
            stateListId: 3,
          }).then(resp => {
            if (resp.data == '移除成功') {
              this.$message.success(resp.data)
              initTable(this)
              return false
            }
            this.$message.error(new Error(resp.data))
          })
        }).catch(() => {
          //几点取消的提示
        })

      },
      //确认退货按钮
      returnGoods (index, row) {
        if (row.stateType == '审核通过') {
          this.$axios.post('sureReturnGoods', {
            returnId: row.returnId,
            stateListId: 3,
            warehouseId: row.warehouseId,
            supplierId: row.supplierId,
            goodsType: row.goodsType,
            goodsName: row.goodsName,
            returnNum: row.returnNum
          }).then(resp => {
            if (resp.data == '退货成功') {
              this.$message.success(resp.data)
              initTable(this)
              return false
            }
            this.$message.error(new Error(resp.data))
          })
        } else {
          this.$message.error(new Error('退货单状态为审核通过才能操作'))
        }
      },
      //以下是添加退货单的方法
      //自定义校验规则
      verification () {
        if (this.subForm.outTime == null || this.subForm.outTime === '') {
          this.$message.error(new Error('时间不能不选择'))
          return false
        }
        if (this.subForm.warehouseName == null || this.subForm.warehouseName === '') {
          this.$message.error(new Error('仓库必须选取'))
          return false
        }
        if (this.subForm.supplierName == null || this.subForm.supplierName === '') {
          this.$message.error(new Error('供应商必须选'))
          return false
        }
        if (this.subForm.goodsType == null || this.subForm.goodsType === '') {
          this.$message.error(new Error('商品的分类必须选'))
          return false
        }
        if (this.subForm.goodsName == null || this.subForm.goodsName === '') {
          this.$message.error(new Error('商品的名称必须选'))
          return false
        }

        if (this.subForm.outNum == null || this.subForm.outNum === '') {
          this.$message.error(new Error('退货数量必须填写'))
          return false
        } else {
          let r = /^[1-9]\d*$/
          if (!r.test(this.subForm.outNum)) {
            this.$message.error(new Error('商品的数量必须为正整数(0除外)'))
            return false
          }
        }
        if (this.subForm.desc == null || this.subForm.desc === '') {
          this.$message.error(new Error('退货原因必须填写'))
          return false
        }

        //添加的数据发往后台
        this.$axios.post('addReturn', {
          modifyTime: this.subForm.outTime,
          supplierId: this.subForm.supplierName,
          goodsType: this.subForm.goodsName,
          goodsName: this.subForm.goodsType,
          returnNum: this.subForm.outNum,
          returnPolicy: this.subForm.desc,
          warehouseId: this.subForm.warehouseName
        }).then(resp => {
          if (resp.data == '提交成功') {
            this.$message.success(resp.data)
            this.dialogFormVisible = false
              initTable(this)
          } else {
            this.$message.error(new Error(resp.data))
          }
        })

      },
      //获取供应商的方法
      getSupplier (val) {
        // alert(val)
        this.$axios.post('outGetSupplier', {
          warehouseId: val
        }).then(resp => {
          if (resp) {
            // console.log(resp.data.supplierList)
            this.subForm.select1 = resp.data.supplierList
            // console.log(this.subForm.select1)
          }
        })
      },
      //获得商品的种类
      getGoodsType () {
        // alert(this.subForm.supplierName)
        this.$axios.post('outGtGoodsType', {
          supplierId: this.subForm.supplierName,
          warehouseId: this.subForm.warehouseName
        }).then(resp => {
          if (resp) {
            // console.log(resp.data.goodsList)
            this.subForm.select2 = resp.data.goodsTypeList
          }
        })
      },
      //获得商品的名称
      getGoodsName () {
        // alert(this.subForm.goodsName)
        this.$axios.post('OutGetGoodsName', {
          goodsType: this.subForm.goodsName,
          supplierId: this.subForm.supplierName,
          warehouseId: this.subForm.warehouseName
        }).then(resp => {
          if (resp) {
            // console.log(resp.data.goodsList)
            this.subForm.select3 = resp.data.goodsList
            // console.log(this.subForm.select1)
          }
        })
      },
      //获取出库前的商品数量的方法：
      getGoodsNum () {
        // alert(this.subForm.warehouseName)
        // alert(this.subForm.goodsName)
        this.$axios.post('outGetGoodsNum', {
          goodsName: this.subForm.goodsType,
          supplierId: this.subForm.supplierName,
          warehouseId: this.subForm.warehouseName,
          goodsType: this.subForm.goodsName
        }).then(resp => {
          if (resp) {
            this.subForm.goodsNum = resp.data.dataNum
          }
        })
      },
      //获取仓库的方法
      getWarehouse (val) {
        this.$axios.post('OutGetWarehouseName', {}).then(resp => {
          if (resp) {
            this.subForm.select5 = resp.data.warehouseNameList
            // alert(resp.data.warehouseNameList.data.warehouseName)
          }
        })
      },
    }
  }

  function initTable ($this) {
    $this.$axios.post('getReturnList', {
      page: $this.page,
      size: $this.size,
      startTime: $this.Form.startTime.toString().split(',')[0],
      overTime: $this.Form.startTime.toString().split(',')[1],
      supplierName: $this.supplierName
    }).then(resp => {
      if (resp) {
        $this.tableData = resp.data.returnList
        $this.total = resp.data.count
      }
    })
  }

</script>

<style scoped>

</style>
